<template>
  <div>
    <div>
      <van-nav-bar
        title="物流信息"
        left-text="返回"
        @click-left="onClickLeft"
        left-arrow
      >
        <template #right>
          <van-icon name="ellipsis" size="20" />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <!-- 地图 -->
      <div
        id="container"
        style="width: 100%; height: 100%; position: absolute"
      ></div>
      <van-popup
        v-model="show"
        :overlay="false"
        round
        style="opacity: 0.9"
        :close-on-click-overlay="false"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-cell :icon="$store.state.orderPic">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            韵达快递 <span>{{ $store.state.OrdersNum }}</span>
          </template>
          <template #right-icon>
            <span>复制</span>
          </template>
        </van-cell>
        <van-steps direction="vertical" :active="0">
          <van-step v-for="(item, index) in Location" :key="index">
            <h5>{{ item.start_status1 }}</h5>
            <p>{{ item.start_status_desc1 }}</p>
            <div slot="active-icon">
              <van-icon name="clock" size="20" color="#ff7047" />
            </div>
            <div slot="inactive-icon">
              <van-icon name="logistics" />
            </div>
          </van-step>
        </van-steps>
        <div><guessLike></guessLike></div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import guessLike from "../Children/GuessLike.vue";
export default {
  components: { guessLike },
  data() {
    return {
      show: true,
      StartingPoint: [],
      EndPoint: [],
      msg: "111.592373",
      msg2: "26.461313",
      Location: [],

      // map: null,
    };
  },

  mounted() {
    this.init();
    this.GetLocationStatus();
  },
  updated() {},
  activated() {
    try {
      this.init();
      this.GetLocationStatus();
    } catch (error) {}
  },
  created() {
    this.GetLocationStatus();
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    async GetLocationStatus() {
      const { data: res } = await this.$http.get("GetLocationStatus", {
        params: { num: this.$store.state.OrdersNum },
      });
      this.Location = res.data;
      console.log(res);
    },
    init() {
      try {
        let that = this;
        // console
        console.log(this.$store.state.Jingwei.StartingPoint[0]);

        var map = new AMap.Map("container", {
          resizeEnable: true,
          center: [116.397428, 39.90923], //地图中心点
          zoom: 13, //地图显示的缩放级别
        });
        // AMap.plugin("AMap.ToolBar", function () {
        //   //异步加载插件
        //   var toolbar = new AMap.ToolBar();
        //   map.addControl(toolbar);
        // });
        map.plugin(["AMap.ToolBar"], function () {
          map.addControl(new AMap.ToolBar());
        });
        //构造路线导航类
        var driving = new AMap.Driving({
          map: map,
        });
        // 根据起终点经纬度规划驾车导航路线
        driving.search(
          new AMap.LngLat(
            that.$store.state.Jingwei.StartingPoint[0],
            that.$store.state.Jingwei.StartingPoint[1]
          ),
          new AMap.LngLat(
            that.$store.state.Jingwei.EndPoint[0],
            that.$store.state.Jingwei.EndPoint[1]
          ),
          function (status, result) {
            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
            if (status === "complete") {
              log.success("路线图显示完成");
            } else {
              log.error("路线图显示失败" + result);
            }
          }
        );
      } catch (error) {}
    },
  },
};
</script>
<style lang="less" scoped>
.van-icon__image {
  height: 2em;
}
</style>